import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

class WebViewTestPage extends StatefulWidget {
  const WebViewTestPage({Key? key}) : super(key: key);

  @override
  State<WebViewTestPage> createState() => _WebViewTestPageState();
}

class _WebViewTestPageState extends State<WebViewTestPage> {
  InAppWebViewController? _webViewController;
  bool _isLoading = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('抖音直播测试 (PC模式)'),
        actions: [
          IconButton(
            icon: const Icon(Icons.refresh),
            onPressed: () {
              _webViewController?.reload();
            },
          ),
        ],
      ),
      body: Stack(
        children: [
          InAppWebView(
            initialUrlRequest: URLRequest(
              url: WebUri('https://live.douyin.com/841480666191'),
            ),
            initialOptions: InAppWebViewGroupOptions(
              crossPlatform: InAppWebViewOptions(
                userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
                javaScriptEnabled: true,
                supportZoom: true,
                useOnLoadResource: true,
                preferredContentMode: UserPreferredContentMode.DESKTOP,
                minimumFontSize: 1,
              ),
              android: AndroidInAppWebViewOptions(
                useHybridComposition: true,
                supportMultipleWindows: true,
                domStorageEnabled: true,
                databaseEnabled: true,
                useWideViewPort: true,
                loadWithOverviewMode: true,
                builtInZoomControls: true,
                displayZoomControls: false,
                initialScale: 100,
                textZoom: 100,
              ),
              ios: IOSInAppWebViewOptions(
                allowsInlineMediaPlayback: true,
              ),
            ),
            onWebViewCreated: (controller) {
              _webViewController = controller;
            },
            onLoadStart: (controller, url) {
              debugPrint('Page started loading: $url');
              setState(() {
                _isLoading = true;
              });
            },
            onLoadStop: (controller, url) async {
              debugPrint('Page finished loading: $url');
              setState(() {
                _isLoading = false;
              });
              
              // Force desktop viewport
              await controller.evaluateJavascript(source: '''
                var viewport = document.querySelector('meta[name="viewport"]');
                if (viewport) {
                  viewport.content = 'width=1280, initial-scale=1.0';
                } else {
                  var meta = document.createElement('meta');
                  meta.name = 'viewport';
                  meta.content = 'width=1280, initial-scale=1.0';
                  document.getElementsByTagName('head')[0].appendChild(meta);
                }
                
                // Remove any mobile-specific styles
                document.documentElement.style.minWidth = '1280px';
                document.body.style.minWidth = '1280px';
              ''');
            },
            onLoadError: (controller, url, code, message) {
              debugPrint('Page load error: $message');
            },
            onProgressChanged: (controller, progress) {
              debugPrint('WebView is loading (progress : $progress%)');
            },
            shouldOverrideUrlLoading: (controller, navigationAction) async {
              // Ensure all navigation uses desktop mode
              return NavigationActionPolicy.ALLOW;
            },
          ),
          if (_isLoading)
            const Center(
              child: CircularProgressIndicator(),
            ),
        ],
      ),
    );
  }
}